    import "./index.scss"
    import store from "../../redux/store"
    import {createCountIncrement,createCountDecrement, createCountDecrementAsync} from "../../redux/action/count"
    import { useState } from "react"
    import {connect} from "react-redux"

    function Count(props) {
        let [val,updateVal] = useState(1)

        // 下拉框选择
        const selectCount = (e) => {
            updateVal(e.target.value)
        }

        const increment = () => {
            props.add(val*1)
        }

        const decrement = () => {
            props.reduce(val*1)
        }

        const decrementBy = () => {
            if (store.getState() % 2 === 0) {
                props.add(val*1)
            }
        }

        const decrementTimer = () => {
            props.addAsync(val*1,1000)
        }

        return <div className="countCom">
            <h2>count:{props.sum}</h2>
            <br />
            <select name="" id="" defaultValue="1" onChange={selectCount}>
                <option value="1">1</option>
                <option value="5">5</option>
                <option value="10">10</option>
            </select>
            <button onClick={increment}>+</button>
            <button onClick={decrement}>-</button>
            <button onClick={decrementBy}>偶数再加</button>
            <button onClick={decrementTimer}>异步相加</button>
        </div>
    }

    export default connect(
        // 映射状态
        state => ({sum:state.count}),
        // 映射操作状态的方法
        {
            add:createCountIncrement,
            reduce:createCountDecrement,
            addAsync:createCountDecrementAsync
        }

    )(Count)